<template>
	<view class="main">
		<view v-if="!eightDeepReportShow">
			<view class="list" v-for="(item, index) in measure" :key="item.name">
				<view @tap="onClickToggleExtend(index)" class="lists">
					<view>
						<view class="itemDataTitle">
							<image src="" class="item_logo">
							</image>
							<text class="itemDataName">{{ item.name }}</text>
							<text class="itemDataValue">{{ item.value }}<text
									class="itemDataValueUnit">{{ item.unit }}</text></text>
							<view v-if="item.isExtend">
								<image src="" class="triangle_border_down" v-if="item.desc || item.boundaries"></image>
							</view>
							<view v-else>
								<image src="" class="triangle_border_down" v-if="item.desc || item.boundaries"></image>
							</view>
						</view>
						<view v-if="item.levels.length > 0" class="itemNotStandLevel">
							<text class="titleLevelName"
								:style="{ color: item.levels[item.levelIndex].color }">{{ item.levels[item.levelIndex].name }}
							</text>
						</view>
						<view v-if="item.isExtend">
							<view class="boundaryContainer" v-if="item.boundaries.length > 0">
								<view class="boundary_space" />
								<!-- 这里有一个错误，原代码中缺少遍历，需要修复 -->
								<view class="boundary_space" />
							</view>
							<view class="barContainer" v-if="item.boundaries.length > 0">
								<view v-for="(b, barIndex) in item.levels" :key="barIndex" class="barItemContainer">
									<view class="itemBar" :style="{ backgroundColor: b.color }"></view>
									<view :class="barIndex == item.levelIndex ? 'levelNameSelected' : 'levelName'"
										:style="{ color: barIndex == item.levelIndex ? b : '#666' }">
										{{ item.levels[barIndex].name }}
									</view>
								</view>
							</view>
							<view class="descContainer">
								{{ item.desc }}
							</view>
							<view class="bottomLine_extend" />
						</view>
						<view v-else>
							<view class="bottomLine" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="deepReport" @tap="jumpToDeepReport">查看八电级深度报告</view>
		<view v-if="eightDeepReportShow">注意该深度报告为demo报告，在线内容可能会随时进行更改</view>
		<view v-if="measure.length && !hideNameDes" class="bottomTxt">基于云康宝体脂仪精确测脂</view>
	</view>
</template>

<script>
	const {
		QNConsts
	} = requirePlugin("QNBleApi");
	const {
		isValidEightMeasure
	} = require("../../util/util.js");

	// 指标图标名称对应
	const iconNames = {
		'fer-Weight': 'report_weight',
		'fer-Stature': 'report_stature',
		'fer-WeightControl': 'report_weightControl',
		'fer-FatControl': 'report_fatControl',
		'fer-SinewControl': 'report_sinewControl',
		'fer-BMR': 'report_bmr',
		'fer-BestVisualWeight': 'report_bestVisualWeight',
		'fer-Bodyfat': 'report_bodyfat',
		'fer-BodyfatMass': 'report_bodyfatMass',
		'fer-BMI': 'report_bmi',
		'fer-BodyAge': 'report_bodyage',
		'fer-BodyShape': 'report_bodyshape',
		'fer-Bone': 'report_bone',
		'fer-HeartIndex': 'report_heart_index',
		'fer-HeartRate': 'report_heart_rate',
		'fer-LBM': 'report_lbm',
		'fer-MineralSalt': 'report_mineralSalt',
		'fer-Muscle': 'report_muscle',
		'fer-Sinew': 'report_muscle_mass',
		'fer-SinewRate': 'report_sinewRate',
		'fer-Obesity': 'report_obesity',
		'fer-Protein': 'report_protein',
		'fer-ProteinMass': 'report_proteinMass',
		'fer-Score': 'report_score',
		'fer-StandardWeight': 'report_standardWeight',
		'fer-Subfat': 'report_subfat',
		'fer-Visfat': 'report_visfat',
		'fer-Water': 'report_water',
		'fer-WaterMass': 'report_waterMass',
		'fer-FattyLiver': 'report_fattyLiver',
	};

	export default {
		props: {
			measure: {
				type: Array,
				default: () => [],
			},
			hideNameDes: {
				type: Boolean,
				default: false,
			},
			eightMeasureData: {
				type: Object,
				default: () => ({}),
			},
		},
		data() {
			return {
				eightDeepReportShow: false,
				iconNames,
				QNConsts: null, // 先定义为 null
			};
		},
		watch: {
			eightMeasureData: {
				handler(data) {
					if (!data) return;
					// 设备类型为八电级且测出了节段数据
					if (isValidEightMeasure(data)) {
						this.eightDeepReportShow = true;
					}
				},
				deep: true
			},
			measure: {
				handler(data) {
					if (!data) return;
					if (this.eightDeepReportShow) {
						this.eightDeepReportShow = false;
					}
				},
				deep: true
			}
		},
		mounted() {
			this.loadPlugin();
		},
		methods: {
			loadPlugin() {
				// #ifdef MP-WEIXIN
				try {
					const plugin = wx.requirePlugin('QNBleApi');
					this.QNConsts = plugin.QNConsts;
					// 可选：将其他插件对象挂载到 this，方便后续使用
					// this.QNMPPlugin = plugin;
					console.log('青牛插件加载成功', this.QNConsts);
				} catch (err) {
					console.error('加载 QNBleApi 插件失败', err);
				}
				// #endif

				// #ifndef MP-WEIXIN
				console.warn('QNBleApi 插件仅在微信小程序中可用');
				// #endif
			},
			//点击列表显示隐藏
			onClickToggleExtend(index) {
				if (
					!this.measure[index].desc &&
					!this.measure[index].boundaries
				)
					return;
				this.$set(this.measure[index], 'isExtend', !this.measure[index].isExtend);
			},

			// 跳转到深度报告页面
			jumpToDeepReport() {
				// 实现跳转到深度报告页面的逻辑
			}
		}
	};
</script>

<style>

	/* components/MeasurePanel/measurePanel.wxss */
	.version {
		padding: 20rpx 0;
		text-align: center;
		font-size: 12px;
	}

	.list {
		height: auto;
		padding-left: 10rpx;
		padding-right: 10rpx;
		font-size: 32rpx;
		background: #fff;
		position: relative;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.lists {
		width: 100%;
		height: 100%;
	}

	.itemDataValueUnit {
		color: #333333;
		font-weight: 500;
		font-size: 20rpx;
		padding-left: 2px;
		text-align: center;
		margin-top: -10rpx;
	}

	.itemDataValue {

		margin-left: 60rpx;
		color: #333333;
		font-weight: bolder;
		font-size: 32rpx;
		padding-left: 2px;
		text-align: center;
		margin-top: -10rpx;
	}

	.itemDataTitle {
		display: flex;
		height: 80rpx;
		align-items: center;
		width: 100%;
		overflow: hidden;
	}

	.item_logo {
		width: 55rpx;
		height: 55rpx;
		margin-left: 20rpx;
		margin-top: -10rpx;
	}

	.itemDataName {
		width: 200rpx;
		margin-left: 20rpx;
		font-size: 30rpx;
		margin-top: -10rpx;
	}

	.itemDataValueView {
		flex-basis: 1;
	}

	.itemNotStandLevel {
		height: 50rpx;
		display: flex;
		justify-content: space-between;
	}

	.itemNotStandLevelDesc {
		font-size: 25rpx;
		color: #b3b3b3;
		margin-left: 95rpx;
		padding-right: 10rpx;
		display: flex;
		justify-content: space-between;
	}

	.titleLevelName {
		margin-left: auto;
		font-size: 20rpx;
		margin-right: 10rpx;
		height: 30rpx;
		border-radius: 15rpx;
		border: solid 3rpx;

		line-height: 30rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
	}

	.boundaryContainer {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
	}

	.boundary_space {
		flex-basis: 50%;
	}

	.boundary {
		flex-basis: 100%;
		text-align: center;
		font-size: 20rpx;
	}

	.barContainer {
		display: flex;
		justify-content: space-around;
	}

	.barItemContainer {
		flex-basis: 100%;
	}

	.itemBar {
		width: 100%;
		height: 10rpx;
	}

	.levelName {
		font-size: 20rpx;
		width: 100%;
		text-align: center;
	}

	.levelNameSelected {
		font-size: 25rpx;
		text-align: center;
		width: 100%;
	}

	.descContainer {
		font-size: 25rpx;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		color: #808080;
		word-break: break-all;
	}

	.barDot {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		background-color: red;
		left: 0rpx;
		right: 0rpx;
	}

	.triangle_border_down {

		width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: 20rpx;
		top: 18rpx;
		text-align: center;
		vertical-align: middle;
	}

	.bottomLine {
		margin-left: 90rpx;
		height: 1rpx;
		background-color: #e5e5e5
	}

	.bottomLine_extend {
		height: 1rpx;
		background-color: #e5e5e5
	}

	.bottomTxt {
		padding: 24rpx;
		text-align: center;
		font-size: 26rpx;
		color: #999;
	}

	.bottom_btn_box {
		margin: 60rpx 0 30rpx;
	}

	.deepReport {
		display: block;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		width: 600rpx;
		text-align: center;
		background: #fff;
		border-radius: 50rpx;
		border: 1px solid #ddd;
		color: #fff;
		background: #01ca9e;
	}
</style>